Impressum
Impressum
Anpassbare Schriftarten für Flexibilität
Hilfreiche Einschätzung der Schwierigkeit
Wie relevant und hilfreich ist es?
Wie schwer ist es anzuwenden?
Variable Fonts sind eine revolutionäre Weiterentwicklung der traditionellen Webfonts. Anstatt für jede Stilvariation einer Schriftart (z. b. normal, fett, kursiv, etc.) eine separate Datei zu verwenden, fasst ein einzelner Variable Font alle Variationen zusammen. Durch die Zusammenführung mehrerer Schriftschnitte kann der Designer oder Entwickler alle möglichen Varianten einer Schriftart dynamisch anpassen.
Die Funktion von Variable Fonts lässt sich mithilfe von Achsen erklären. Für die Schrift gibt es viele Achsen, die man mit CSS-Attributen steuern kann.
Dabei gibt es Achsen für Strichstärke (weight), Schriftbreite (width), Kursive Darstellung (italic), Neigung (slant) und noch weitere.
Auf der jeweiligen Achse kann nun ein numerischer Wert festgelegt werden. Dadurch ist es möglich, einen beliebigen Punkt auf der Skala auszuwählen,
anstatt sich zwischen festgelegten Werten wie eine Schriftstärke von 700 oder 800 entscheiden zu müssen. So kann beispielsweise ein Wert wie 742 gewählt werden.
/* Ein Beispiel der Einbindung eines Variable Fonts */
/* Hier mit definierten Bereichen für weight und stretch */
@font-face {
font-family: 'MyVariableFont';
src: url('/fonts/MyVariableFont.woff2') format('woff2-variations');
font-weight: 300 900;
font-stretch: 70% 125%;
}
Auf dieser Webseite kommt der Variable Font Inter von Google Fonts zum Einsatz, der mehrere Achsen bietet: Optical Size zur Anpassung der Schriftgröße, Weight zur Steuerung der Schriftstärke und Italic für die kursive Darstellung. Zur Reduzierung der Komplexität wurde ausschließlich die Weight-Achse an ausgewählten Stellen der Seite verwendet. Alle Anpassungen der Schriftstärke wurden mithilfe von CSS-Variablen oder direkt im CSS-Code vorgenommen. Weitere Informationen zur Nutzung von CSS-Variablen befinden sich im Abschnitt CSS.
/* Einbindung des Variable Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
/* Verwendung des Variable Fonts */
--font-family-primary: "Inter", "Arial" , sans-serif;
--font-family-body: var(--font-family-primary);
body {
font-family: var(--font-family-body);
}
/* Anpassung des Variable Fonts in CSS */
--font-size-text: 22px;
--font-weight-regular: 400;
--text: #020a15;
.info-point p{
font-size: var(--font-size-text);
font-weight: var(--font-weight-regular);
color: var(--text);
}
Nutze die unterschiedlichen Achsen von Variable Fonts, um eine klare typografische Hierarchie zu schaffen. Beispielsweise können Überschriften kräftiger und breiter gestaltet werden, während Fließtext schmaler und leichter bleibt.
Die Möglichkeit, Schriftstile dynamisch zu variieren, kann dazu verleiten, sehr unterschiedliche Stilrichtungen innerhalb einer Schrift zu verwenden. Halte dich an konsistente Schriftstile, um ein harmonisches Erscheinungsbild zu bewahren.
Variable Fonts bieten zahlreiche Achsen. Wähle nur die Achsen aus, die für dein Design tatsächlich relevant sind, um Komplexität zu reduzieren. Zu viele Variationen können das Design überladen. Halte die Anzahl der genutzten Achsen überschaubar, um ein sauberer und kohärentes Layout zu gewährleisten.
Die Verwendung von @font-face ermöglicht eine präzise Integration von Variable Fonts und bietet Optionen zur Optimierung, wie zum Beispiel durch das font-display-Attribut. Es gibt jedoch auch einfachere Alternativen über Webfont-Anbieter, bei denen lediglich ein Import erforderlich ist. Für eine detailliertere Kontrolle und Anpassung der Variable Fonts ist es jedoch empfehlenswert, @font-face zu verwenden.